<ng-template #tplOriginContent><ng-content></ng-content></ng-template> <!-- Compatible: the <ng-content> can appear only once -->

<div [apesNoAnimation]="apesNoAnimation">
  <div *ngIf="mask"
       class="{{prefixCls}}-mask"
       [ngClass]="maskAnimationClassMap"
       [class.apes-modal-mask-hidden]="hidden"
       [ngStyle]="apesMaskStyle"
       [style.zIndex]="apesZIndex"
  ></div>
  <div
    (click)="onClickMask($event)"
    (mouseup)="onDialogUp()"
    class="{{prefixCls}}-wrap {{ apesWrapClassName }}"
    [style.zIndex]="apesZIndex"
    [style.visibility]="hidden ? 'hidden' : null"
    tabindex="-1"
    role="dialog"
  >
    <div #modalContainer
         class="{{prefixCls}} {{ apesClassName }}"
         (mousedown)="onMaskDialogDown()"
         [ngClass]="modalAnimationClassMap"
         [ngStyle]="apesStyle"
         [style.width]="apesWidth | toCssUnit"
         [style.transform-origin]="transformOrigin"
         role="document"
    >
      <div class="{{prefixCls}}-content">
        <button *ngIf="apesClosable" (click)="onClickCloseBtn()" class="{{prefixCls}}-close" aria-label="Close">
          <span class="{{prefixCls}}-close-x">
            <ng-container *apesStringTemplateOutlet="apesCloseIcon">
              <i apes-icon [apesType]="apesCloseIcon" class="{{prefixCls}}-close-icon"></i>
            </ng-container>
          </span>
        </button>
        <ng-container *ngIf="!hidden" [ngSwitch]="true">
          <ng-container *ngSwitchCase="isModalType('default')" [ngTemplateOutlet]="tplContentDefault"></ng-container>
          <ng-container *ngSwitchCase="isModalType('confirm')" [ngTemplateOutlet]="tplContentConfirm"></ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>

<!-- [Predefined] Default Modal Content -->
<ng-template #tplContentDefault>
  <div *ngIf="apesTitle" class="{{prefixCls}}-header">
    <div class="{{prefixCls}}-title">
      <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="isTemplateRef(apesTitle)" [ngTemplateOutlet]="apesTitle"></ng-container>
        <ng-container *ngSwitchCase="isNonEmptyString(apesTitle)"><div [innerHTML]="apesTitle"></div></ng-container>
      </ng-container>
    </div>
  </div>
  <div class="{{prefixCls}}-body" [ngStyle]="apesBodyStyle">
    <ng-container #bodyContainer>
      <ng-container *ngIf="!isComponent(apesContent)" [ngSwitch]="true">
        <ng-container *ngSwitchCase="isTemplateRef(apesContent)" [ngTemplateOutlet]="apesContent"></ng-container>
        <ng-container *ngSwitchCase="isNonEmptyString(apesContent)"><div [innerHTML]="apesContent"></div></ng-container>
        <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
      </ng-container>
    </ng-container>
  </div>
  <div *ngIf="apesFooter !== null" class="{{prefixCls}}-footer">
    <ng-container [ngSwitch]="true">
      <ng-container *ngSwitchCase="isTemplateRef(apesFooter)" [ngTemplateOutlet]="apesFooter"></ng-container>
      <ng-container *ngSwitchCase="isNonEmptyString(apesFooter)"><div [innerHTML]="apesFooter"></div></ng-container>
      <ng-container *ngSwitchCase="isModalButtons(apesFooter)">
        <button *ngFor="let button of apesFooter" apes-button
                (click)="onButtonClick(button)"
                [hidden]="!getButtonCallableProp(button, 'show')"
                [apesLoading]="getButtonCallableProp(button, 'loading')"
                [disabled]="getButtonCallableProp(button, 'disabled')"
                [apesType]="button.type"
                [apesShape]="button.shape"
                [apesSize]="button.size"
                [apesGhost]="button.ghost"
        >{{ button.label }}</button>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <button *ngIf="apesCancelText!==null" apes-button (click)="onClickOkCancel('cancel')" [apesLoading]="apesCancelLoading" [disabled]="apesCancelDisabled">
          {{ cancelText }}
        </button>
        <button *ngIf="apesOkText!==null" apes-button [apesType]="apesOkType" (click)="onClickOkCancel('ok')" [apesLoading]="apesOkLoading" [disabled]="nzOkDisabled">
          {{ okText }}
        </button>
      </ng-container>
    </ng-container>
  </div>
</ng-template>
<!-- /[Predefined] Default Modal Content -->

<!-- [Predefined] Confirm Modal Content -->
<ng-template #tplContentConfirm>
  <div class="{{prefixCls}}-body" [ngStyle]="apesBodyStyle">
    <div class="{{prefixCls}}-confirm-body-wrapper">
      <div class="{{prefixCls}}-confirm-body">
        <i apes-icon [apesType]="apesIconType"></i>
        <span class="{{prefixCls}}-confirm-title">
          <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplateRef(apesTitle)" [ngTemplateOutlet]="apesTitle"></ng-container>
            <ng-container *ngSwitchCase="isNonEmptyString(apesTitle)"><span [innerHTML]="apesTitle"></span></ng-container>
          </ng-container>
        </span>
        <div class="{{prefixCls}}-confirm-content">
          <ng-container #bodyContainer>
            <ng-container *ngIf="!isComponent(apesContent)" [ngSwitch]="true">
              <ng-container *ngSwitchCase="isTemplateRef(apesContent)" [ngTemplateOutlet]="apesContent"></ng-container>
              <ng-container *ngSwitchCase="isNonEmptyString(apesContent)"><div [innerHTML]="apesContent"></div></ng-container>
              <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
            </ng-container>
          </ng-container>
        </div>
      </div>
      <div class="{{prefixCls}}-confirm-btns">
        <button *ngIf="apesCancelText!==null"
                apes-button
                (click)="onClickOkCancel('cancel')"
                [apesLoading]="apesCancelLoading"
                [disabled]="apesCancelDisabled">
          {{ cancelText }}
        </button>
        <button #autoFocusButtonOk
                *ngIf="apesOkText!==null"
                apes-button
                (click)="onClickOkCancel('ok')"
                [apesType]="apesOkType"
                [apesLoading]="apesOkLoading"
                [disabled]="apesOkDisabled">
          {{ okText }}
        </button>
      </div>
    </div> <!-- /.{{prefixCls}}-confirm-body-wrapper -->
  </div>
</ng-template>





